<html>

<head>
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link href="./style.css" rel="stylesheet">
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100;
            /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="editor—wrapper">
        <div id="toolbar-container"><!-- 工具栏 --></div>
        <div id="editor-container"><!-- 编辑器 --></div>
    </div>
</body>
<script src="./index.js"></script>
<script>
    var h5Port;
    const { createEditor, createToolbar } = window.wangEditor
    let webResult=""
    const editorConfig = {
        placeholder: '写下你的旅行...',
        onChange(editor) {
            webResult = editor.getHtml()
            console.log('editor content',webResult)
            // 也可以同步到 <textarea>
        }
    }

    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'simple', // or 'simple'
    })

    const toolbarConfig = {}
    toolbarConfig.toolbarKeys = [
        // 菜单 key
        'headerSelect',

        // 分割线
        '|',

        // 菜单 key
        'bold', 'italic','bulletedList', 'numberedList'

        // // 菜单组，包含多个菜单
        // {
        //     key: 'group-more-style', // 必填，要以 group 开头
        //     title: 'more', // 必填
        //     menuKeys: ["through", "clearStyle"] // 下级菜单 key ，必填
        // },
        // 继续配置其他菜单...
    ]
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple', // or 'simple'
    })
    function getHtml(){
        return {
            webResult
        }
    }
    window.addEventListener('message', function (event) {
    if (event.data === '__init_port__') {
      if (event.ports[0] !== null) {
        h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
        h5Port.onmessage = function (event) {
          // 2. 接收ets侧发送过来的消息.
          var msg = 'Got message from ets:';

          var result = event.data;
          if (typeof (result) === 'string') {
            console.info(`received string message from html5, string is: ${result}`);
            editor.setHtml(result)
          }
        }
      }
    }
  })
</script>

</html>